<div class="container span12">
	<div class="tabbable">
		<h4>Bed Visualizer Settings</h4>
		<ul class="nav nav-tabs" id="bedlevelvisualizer_tabs">
			<li class="active"><a data-toggle="tab" href="#bedlevelvisualizer_general">General</a></li>
			<li><a data-toggle="tab" href="#bedlevelvisualizer_custom_commands">Custom Commands</a></li>
			<li><a data-toggle="tab" href="#bedlevelvisualizer_stored_data">Current Mesh Data</a></li>
			<li><a data-toggle="tab" href="#bedlevelvisualizer_corrections">Angle Corrections</a></li>
		</ul>
		<div class="tab-content">
			<div id="bedlevelvisualizer_general" class="tab-pane active">
				<div class="control-group">
					<label for="bedlevelvisualizer_command"><i class="icon icon-info-sign" title="GCODE commands to send to printer to retrieve grid data" data-toggle="tooltip"></i> GCODE Commands for Mesh Update Process <small class="muted">Firmware specific examples can be found <a href="https://github.com/jneilliii/OctoPrint-BedLevelVisualizer/blob/master/wiki/gcode-examples.md" target="_blank">here</a>.</small></label>
					<textarea class="input-block-level" id="bedlevelvisualizer_command" rows="4" data-bind="value: settingsViewModel.settings.plugins.bedlevelvisualizer.command"></textarea>
				</div>
				<div class="row-fluid">
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Save/Load mesh data to/from config.yaml" data-toggle="tooltip"></i> Save Mesh <input class="input-checkbox" type="checkbox" id="bedlevelvisualizer_save_mesh" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.save_mesh" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Flip the mesh data in the X direction." data-toggle="tooltip"></i> Flip X Axis <input class="input-checkbox" type="checkbox" id="bedlevelvisualizer_flipX" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.flipX" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Make origin point center of bed." data-toggle="tooltip"></i> Use Center Origin <input class="input-checkbox" type="checkbox" id="bedlevelvisualizer_use_center_origin" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.use_center_origin" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
				<div class="row-fluid">
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Remove row labeling from mesh data." data-toggle="tooltip"></i> Remove Row Labels <input class="input-checkbox" type="checkbox" id="bedlevelvisualizer_stripFirst" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.stripFirst" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Flip the mesh data in the Y direction." data-toggle="tooltip"></i> Flip Y Axis <input class="input-checkbox" type="checkbox" id="bedlevelvisualizer_flipY" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.flipY" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Make all z offsets relative to origin point." data-toggle="tooltip"></i> Use Relative Z Offsets <input class="input-checkbox" type="checkbox" id="bedlevelvisualizer_use_relative_offsets" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.use_relative_offsets" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
				<div class="row-fluid">
					<div class="control-group span4">
						<label for="bedlevelvisualizer_timeout"><i class="icon icon-info-sign" title="Timeout value that will stop processing of visualizer in seconds." data-toggle="tooltip"></i> Processing Timeout</label>
						<div class="input-append">
							<input type="number" min="0" step="10" id="bedlevelvisualizer_timeout" class="input-mini text-right" data-bind="value: settingsViewModel.settings.plugins.bedlevelvisualizer.timeout">
							<span class="add-on">secs</span>
						</div>
					</div>
					<div class="control-group span4">
						<label for="bedlevelvisualizer_rotate"><i class="icon icon-info-sign" title="Clockwise rotation angle of visualized mesh to match physical orientation of bed." data-toggle="tooltip"></i> Clockwise Rotation</label>
						<div class="input-append">
							<input type="number" min="0" max="270" step="90" id="bedlevelvisualizer_rotate" class="input-mini text-right" data-bind="value: settingsViewModel.settings.plugins.bedlevelvisualizer.rotation">
							<span class="add-on">degs</span>
						</div>
					</div>
					<div class="control-group span4">
						<label for="bedlevelvisualizer_z_offset"><i class="icon icon-info-sign" title="Comma separated list of integers for controlling the z offset of the visualized graph in the format of <z-min>,<z-max>. For example the default value is -2,2. This also affects the color map. " data-toggle="tooltip"></i> Graph Z-Limits</label>
						<div class="controls">
							<input type="text" id="bedlevelvisualizer_z_offset" class="input-small" data-bind="value: settingsViewModel.settings.plugins.bedlevelvisualizer.graph_z_limits">
						</div>
					</div>
				</div>
				<div class="row-fluid">
                    <div class="control-group">
                        <label for="bedlevelvisualizer_colorscale"><i class="icon icon-info-sign" title="Either an array of percentage and color pairs or a Plotly named colorscale" data-toggle="tooltip"></i> Colorscale</label>
                        <div class="controls">
                            <input type="text" id="bedlevelvisualizer_colorscale" class="input-block-level" data-bind="value: settingsViewModel.settings.plugins.bedlevelvisualizer.colorscale" placeholder='[[0, "rebeccapurple"],[0.4, "rebeccapurple"],[0.45, "blue"],[0.5, "green"],[0.55, "yellow"],[0.6, "red"],[1, "red"]]'>
                            <small class="help-block">Array of percentage/color pairs, ie <code>[[0, "blue"],[1, "red"]]</code> will create a gradient between blue to red. Percentage values are in deccimal format and colors can be HTML hex values or color names surrounded by double quotes. You can also use a named color scale from <a href="https://plotly.com/javascript/colorscales/">here</a>. Clear this setting to load the default option and click Save below.</small>
                        </div>
                    </div>
                </div>
				<div class="row-fluid">
					<div class="control-group">
						<i class="icon icon-info-sign" title="Ignore Bed Level Correction Matrix by enabling this option." data-toggle="tooltip"></i> Ignore Bed Level Correction Matrix: <input class="input-checkbox" type="checkbox" id="ignore_correction_matrix" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.ignore_correction_matrix" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
				<div class="row-fluid">
					<div class="control-group">
						<i class="icon icon-info-sign" title="Show webcam while processing." data-toggle="tooltip"></i> Show webcam while processing: <input class="input-checkbox" type="checkbox" id="show_webcam" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.show_webcam" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
				<div class="row-fluid">
					<div class="control-group">
						<i class="icon icon-info-sign" title="Enable saving snapshot on every rendering of the graph." data-toggle="tooltip"></i> Enable Local Snapshots of Rendered Graphs: <input class="input-checkbox" type="checkbox" id="snap_shot" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.save_snapshots" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
				<div class="row-fluid">
					<div class="control-group">
						<i class="icon icon-info-sign" title="Enable custom debug logging." data-toggle="tooltip"></i> Enable Debug Logging: <input class="input-checkbox" type="checkbox" id="debug_logging" data-bind="checked: settingsViewModel.settings.plugins.bedlevelvisualizer.debug_logging" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
			</div>
			<div id="bedlevelvisualizer_custom_commands" class="tab-pane">
				<div class="row-fluid">
					<div class="span10">Click on button to configure options. Use the drop-down to select icon.</div>
					<div class="span2" style="text-align: center;"><button class="btn btn-mini" data-bind="click: addCommand" title="Add custom command button"><i class="fa fa-plus"></i> Add</button></div>
				</div>
				<div data-bind="sortable: { data: settingsViewModel.settings.plugins.bedlevelvisualizer.commands, options: { cancel: '.unsortable', handle: '.move_command'} }" class="row-fluid">
					<div class="btn-group" style="margin: 5px;">
						<button type="button" class="btn iconpicker-component" data-bind="click: $root.showEditor, attr: {title: (tooltip() ? tooltip : command)}"><i class="fa-lg" data-bind="css: icon"></i> <span data-bind="text: label"></span></button>
						<button type="button" class="icp icp-dd btn dropdown-toggle" data-selected="fa-car" data-toggle="dropdown" aria-expanded="false" data-bind="iconpicker: icon,iconpickerOptions: {searchInFooter: true, hideOnSelect: true, collision: true}">
							<span class="caret"></span>
							<span class="sr-only">Toggle Dropdown</span>
						</button>
						<div class="dropdown-menu iconpicker-container"></div>
						<button type="button" class="btn btn-mini move_command" title="Move button">
							<i class="fa fa-arrows"></i>
						</button>
						<button type="button" class="btn btn-mini copy_command" data-bind="click: $parent.copyCommand" title="Copy button">
							<i class="fa fa-copy"></i>
						</button>
						<button type="button" class="btn btn-mini btn-danger removeJob" data-bind="click: $parent.removeCommand" title="Delete button">
							<i class="fa fa-times"></i>
						</button>
					</div>
				</div>
			</div>

			<div id="bedlevelvisualizer_stored_data" class="tab-pane">
				<span data-bind="template: {name: 'bedlevelvisualize_meshtable', data: {mesh: $root.mesh_data(), len: 3}}"></span>
				<div class="row-fluid" style="padding-top: 10px;">
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Display mesh with descending y axis" data-toggle="tooltip"></i> Descending y axis <input class="input-checkbox" type="checkbox" data-bind="checked: $root.descending_y" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Display mesh with descending x axis" data-toggle="tooltip"></i> Descending x axis <input class="input-checkbox" type="checkbox" data-bind="checked: $root.descending_x" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
			</div>

			<div id="bedlevelvisualizer_corrections" class="tab-pane">
				<span data-bind="template: {name: 'bedlevelvisualize_meshtable', data: {mesh: $root.mesh_adjustment(), len: 0}}"></span>
				<div class="row-fluid" style="padding-top: 10px;">
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Display on plugin main tab screen" data-toggle="tooltip"></i> Display on tab screen <input class="input-checkbox" type="checkbox" data-bind="checked: $root.showdegree" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Adjustment screw hub for a full 360° turn in millimeters" data-toggle="tooltip"></i> Imperial screws <input class="input-checkbox" type="checkbox" data-bind="checked: $root.imperial, click: function(){$root.screw_hub(25.4/$root.screw_hub()); return true;}" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
				</div>
				<div style="padding-top: 5px;" class="row-fluid">
					<div class="control-group span4">
						<i class="icon icon-info-sign" title="Reverse the adjustment screws turning direction logic" data-toggle="tooltip"></i> Reverse turn direction <input class="input-checkbox" type="checkbox" data-bind="checked: $root.reverse" style="display: inline-block;margin-bottom: 5px;"></input>
					</div>
					<div class="control-group span3" title="Adjustment screw details." data-toggle="tooltip">
						<div class="input-append">
							<input style="width: 4em;" type="number" min="0" step="0.001" class="input-mini text-right" oninput="this.value = Math.abs(parseFloat(this.value || 0.25));" data-bind="value: $root.screw_hub">
							<div class="add-on" data-bind="text: $root.imperial()?'turns per inch':'mm per turn'"></div>
						</div>
					</div>
					<div class="control-group span3">
						<select style="width: 6em;"
								class="controls"
								oninput="this.value = Math.abs(parseFloat(this.value || 0.25));"
								type="number"
								size="1"
								data-bind="	value: $root.screw_hub,
											options: { false:	[	{no: 0.25, name:'M1 or M1.2'},
																	{no: 0.35, name:'M1.6'},
																	{no: 0.4, name:'M2'},
																	{no: 0.45, name:'M2.5'},
																	{no: 0.5, name:'M3'},
																	{no: 0.7, name:'M4'},
																	{no: 0.9, name:'M5'},
																	{no: 1.0, name:'M6'},
																	{no: 1.25, name:'M8'}],
														true:	[	{no: 64, name: '#1'},
																	{no: 56, name: '#2'},
																	{no: 48, name: '#3'},
																	{no: 40, name: '#4/#5'},
																	{no: 32, name: '#6/#8'},
																	{no: 24, name: '#10/#12'}]}[$root.imperial()],
											optionsCaption: '- select -',
											optionsValue: 'no',
											optionsText: 'name',
											valueAllowUnset: true">
						</select>
					</div>
				</div>
			</div>


		</div>
	</div>
</div>

<div id="BedLevelVisulizerCommandEditor" data-bind="with: selected_command" class="modal hide fade">
	<div class="modal-header">
		<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
		<h3>Command Editor</h3>
	</div>
	<div class="modal-body">
		<div class="controls"><label class="control-label">{{ _('Label') }}</label><input type="text" class="input-block-level" data-bind="value: label"/></div>
		<div class="controls"><label class="control-label">{{ _('Tooltip') }}</label><input type="text" class="input-block-level" data-bind="value: tooltip"/></div>
		<div class="controls"><label class="checkbox">{{ _('Enabled While Printing') }}<input type="checkbox" data-bind="checked: enabled_while_printing" title="Enabled While Printing"/></label></div>
		<div class="controls"><label class="checkbox">{{ _('Enabled While Graphing') }}<input type="checkbox" data-bind="checked: enabled_while_graphing" title="Enabled While Graphing"/></label></div>
		<div class="controls"><label class="checkbox">{{ _('Confirm') }}<input type="checkbox" data-bind="checked: confirmation" title="Prompt for Confirmation"/></label></div>
		<!-- ko if: confirmation -->
		<div class="controls"><label class="control-label">{{ _('Message') }}</label><input type="text" class="input-block-level" data-bind="value: message"/></div>
		<!-- /ko -->
		<div class="controls"><label class="control-label">{{ _('Command') }}</label><textarea class="input-block-level" id="terminalcommandsextended_command" rows="4" data-bind="value: command"></textarea></div>
		<div>
			<div><small><a href="#" class="muted" data-bind="toggleContent: { class: 'fa-caret-right fa-caret-down', container: '#BedLevelVisulizerCommandEditor .parameters' }"><i class="fa fa-caret-right"></i> Command Parameters</a></small></div>
			<div class="parameters row-fluid" data-bind="style: { display: input().length > 0 ? 'block' : 'none' }">
				<div class="row-fluid">
					<div class="span4">Label</div>
					<div class="span3">Parameter</div>
					<div class="span4">Default</div>
					<div class="span1"><button class="btn btn-mini" data-bind="click: $root.addParameter" title="Add Command Paramter"><i class="fa fa-plus"></i></button></div>
				</div>
				<!-- ko foreach: input -->
					<div class="row-fluid">
						<div class="span4"><input type="text" class="input-block-level" data-bind="value: label"/></div>
						<div class="span3"><input type="text" class="input-block-level" data-bind="value: parameter"/></div>
						<div class="span4"><input type="text" class="input-block-level" data-bind="value: value"/></div>
						<div class="span1">
							<div class="btn-group" style="padding-top: 3px;">
								<button class="btn btn-mini" data-bind="click: $root.insertParameter" title="Append to End of Command Input Above"><i class="fa fa-plus"></i></button>
								<button class="btn btn-mini btn-danger" data-bind="click: $root.removeParameter" title="Remove Command Parameter"><i class="fa fa-times"></i></button>
							</div>
						</div>
					</div>
				<!-- /ko -->
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<div class="row-fluid" style="text-align: center;">
			<div class="btn-group" style="display: inline-block; margin-left: 0px;">
			<!-- ko foreach: input -->
				<span style="cursor: default" data-bind="text: label" class="btn"></span>
				<input type="text" class="input-mini btn active" style="cursor: text;" data-bind="attr: {placeholder: label}, value: value">
			<!-- /ko -->
				<button type="button" class="btn" data-dismiss="modal" data-bind="attr: {title: (tooltip() ? tooltip : command)}"><i class="fa-lg" data-bind="css: icon"></i> <span data-bind="text: label"></span></button>
			</div>
		</div>
	</div>
</div>
